<template>
	<div class="top">
	<el-container class="home-container">
		<!--头部区域-->
		<el-header>

			<!--头部区域的文字-->
			<span class="headFont">Vue的学习教程</span>
			<!--头部区域的输入框-->
			<div class="headerInput">
				<el-input v-model="input" placeholder="html教程"></el-input>
			</div>

			<!--头部区域的菜单栏-->
			<div class="headerMenu">
				<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" text-color="#fff">
					<el-menu-item index="1">首页</el-menu-item>
					<el-menu-item index="2">HTML</el-menu-item>
					<el-menu-item index="3">CSS</el-menu-item>
					<el-menu-item index="4">JAVASCRIPT</el-menu-item>
					<el-menu-item index="5">VUE</el-menu-item>
					<el-menu-item index="6">BOOTSTRAP</el-menu-item>
					<el-menu-item index="7">NODEJS</el-menu-item>
					<el-menu-item index="8">JQUERY</el-menu-item>
					<el-menu-item index="9">PYTHON</el-menu-item>
					<el-menu-item index="10">JAVA</el-menu-item>
					<el-menu-item index="11">C</el-menu-item>
					<el-menu-item index="12">C++</el-menu-item>
					<el-menu-item index="13">C#</el-menu-item>
				</el-menu>
			</div>
		</el-header>

		<el-container>
			<!--左侧边栏区域  左侧导航栏-->
			<el-aside width="210px">
				<div class="nav">
					<div class="toggle-button">
						<span><i class="el-icon-share"></i>vue.js教程<i class="el-icon-loading"></i></span>
					</div>
					<el-menu default-active="1" class="el-menu-vertical-demo">
						<el-menu-item index="1" @click='goBack()'>
							<i class="iconfont icon-jiaoyukeji"></i>
							<span slot="title">Vue.js教程</span>
						</el-menu-item>
						<el-menu-item index="2">
							<i class="iconfont icon-keji4"></i>
							<span slot="title">Vue.js安装</span>
						</el-menu-item>
						<el-menu-item index="3">
							<i class="iconfont icon-keji5"></i>
							<span slot="title">Vue.js目录结构</span>
						</el-menu-item>
						<el-menu-item index="4">
							<i class="iconfont icon-kejixiangmu1"></i>
							<span slot="title">Vue.js模板语法</span>
						</el-menu-item>
						<el-menu-item index="5">
							<i class="iconfont icon-kejipeixun"></i>
							<span slot="title">Vue.js条件语句</span>
						</el-menu-item>
						<el-menu-item index="6">
							<i class="iconfont icon-keji6"></i>
							<span slot="title">Vue.js循环语句</span>
						</el-menu-item>
						<el-menu-item index="7">
							<i class="iconfont icon-jiaotongkeji"></i>
							<span slot="title">Vue.js计算属性</span>
						</el-menu-item>
						<el-menu-item index="8">
							<i class="iconfont icon-keji01"></i>
							<span slot="title">Vue.js监听属性</span>
						</el-menu-item>
						<el-submenu index="9">
							<template slot="title">
								<i class="iconfont icon-keji"></i>
								<span slot="title">Vue.js样式绑定</span>
							</template>
							<el-menu-item-group title="过渡">
								<!-- <span slot="title">过渡</span> -->
								<el-menu-item index="9-1">过渡1</el-menu-item>
								<el-menu-item index="9-2">过渡2</el-menu-item>
							</el-menu-item-group>
							<el-menu-item-group title="动画">
								<el-menu-item index="9-3">动画1</el-menu-item>
							</el-menu-item-group>
							<el-submenu index="9-4">
								<span slot="title">动画2</span>
								<el-menu-item index="9-4-1">选项1</el-menu-item>
							</el-submenu>
						</el-submenu>
					</el-menu>
				</div>
			</el-aside>

			<!--主体内容区域-->
			<el-main>
				<el-row :gutter="3">
					<el-col :span="18">
						<!-- <div> -->
						<el-card class="box-card">
							<div slot="header" class="clearfix">
								<span>开始学习Vue</span>
								<a href="https://cn.vuejs.org/" target="_blank">Vue.js下载地址</a>
							</div>
							<h1>Vue.js 教程</h1>
							<div class="first">
								<div class="photo"><img src="../assets/logo.png" alt="Paris"></div>
								<div class="intro">
									<p>Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。</p>
									<p>Vue 只关注视图层， 采用自底向上增量开发的设计。</p>
									<p>Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。</p>
									<p>Vue 学习起来非常简单，本教程基于Vue2版本测试，Vue3请参阅Vue3教程。</p>

								</div>
							</div>


							<div class="second">

								<el-table :data="tableData2" style="width: 100%" :row-class-name="tableRowClassName">
									<el-table-column prop="date" label="日期" width="180">
									</el-table-column>
									<el-table-column prop="name" label="姓名" width="180">
									</el-table-column>
									<el-table-column prop="address" label="学习进度">
									</el-table-column>
								</el-table>
							</div>

						</el-card>
						<!-- 	</div> -->
					</el-col>
					<el-col :span="6">

						<div class="form">
							<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
								class="demo-ruleForm">
								<el-form-item label="学习名称" prop="name">
									<el-input v-model="ruleForm.name"></el-input>
								</el-form-item>
								<el-form-item label="学习地点" prop="region">
									<el-select v-model="ruleForm.region" placeholder="请选择学习地点">
										<el-option label="自习室" value="studyRoom"></el-option>
										<el-option label="家" value="home"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="学习时间" required>
									<el-time-select v-model="ruleForm.value1" :picker-options="{
											    start: '08:30',
											    step: '00:15',
											    end: '18:30'
											  }" placeholder="选择时间">
									</el-time-select>
								</el-form-item>
								<el-form-item label="是否完成" prop="delivery">
									<el-switch v-model="ruleForm.delivery"></el-switch>
								</el-form-item>
								<el-form-item label="学习目标" prop="type">
									<el-checkbox-group v-model="ruleForm.type">
										<el-checkbox label="看文档" name="type"></el-checkbox>
										<el-checkbox label="看视频" name="type"></el-checkbox>
										<el-checkbox label="写damo" name="type"></el-checkbox>
										<el-checkbox label="调试布局" name="type"></el-checkbox>
									</el-checkbox-group>
								</el-form-item>
								<el-form-item label="学习成果" prop="resource">
									<el-radio-group v-model="ruleForm.resource">
										<el-radio label="完成非常好"></el-radio>
										<el-radio label="完成较好"></el-radio>
										<el-radio label="完成一般"></el-radio>
									</el-radio-group>
								</el-form-item>
								<el-form-item label="学习心得" prop="desc">
									<el-input type="textarea" v-model="ruleForm.desc"></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
									<el-button @click="resetForm('ruleForm')">重置</el-button>
								</el-form-item>
							</el-form>
						</div>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
	</el-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				ruleForm: { //表单里的内容
					name: '',
					region: '',
					value1: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				rules: { //表单验证规则
					name: [{
							required: true,
							message: '请输入学习内容名称',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 10 个字符',
							trigger: 'blur'
						}
					],
					region: [{
						required: true,
						message: '请选择学习地点',
						trigger: 'change'
					}],
					type: [{
						type: 'array',
						required: true,
						message: '请至少选择一个学习目标',
						trigger: 'change'
					}],
					resource: [{
						required: true,
						message: '请选择活动资源',
						trigger: 'change'
					}],
					desc: [{
						required: true,
						message: '请填写学习心得',
						trigger: 'blur'
					}]
				},
				input: '', //头部区域的输入框
				activeIndex: '', //头部区域的导航栏链接到的地址
				tableData2: [{ //表格里的数据信息
					date: '2022-01-10',
					name: '张三',
					address: '登录菜鸟教程进行Vue的文档学习',
				}, {
					date: '2022-01-15',
					name: '张三',
					address: '观看相关视频学习Vue相关组件'
				}, {
					date: '2022-01-20',
					name: '张三',
					address: '自己写一些小型案例',
				}, {
					date: '2022-02-01',
					name: '张三',
					address: '完成一个网页的开发'
				}]

			}
		},
		created() {

		},
		methods: {
			handleSelect(key, keyPath) {

				console.log(key, keyPath);
			},
			goBack() {
				this.$router.push('/jiaocheng'); //想要导航到不同的URL
			},
			tableRowClassName({ //表格渐变色
				row,
				rowIndex
			}) {
				if (rowIndex === 1) {
					return 'warning-row';
				} else if (rowIndex === 3) {
					return 'success-row';
				}
				return '';
			}
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					alert('submit!');
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
	}
</script>

<style>
	.top{ width: 1519px; }
	.second {
		margin-top: 50px !important;
	}

	.form {
		background-color: #FFFFFF;
		width: 320px;
		height: 100%;
		margin-right: 30px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	/* .el-table {
		margin-top: 50px !important;
		border-top: #96B97D;
	} */

	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}


	.photo {
		float: left;
		width: 30%;
	}

	.intro {
		float: right;
		width: 70%;
	}

	.home-container {
		height: 100%;
	}

	.el-header {
		display: flex;
		position: relative;
		background-color: #F6F6F6;
		height: 150px !important;

	}

	.el-aside {
		
		background-color: #F6F4F0;

		.el-menu {
			border-right: none;
		}
	}

	.el-main {
		background-color: #F6F6F6;
	}

	.headerInput {
		position: absolute;
		right: 200px;
		margin-top: 30px;
	}

	.el-menu-demo {
		
		margin-top: 80px;
		width: 100%;
		background-color: #96B97D;
	}

	.el-menu-item:hover {
		color: #000000 !important;
		background-color: #96B97D !important;
	}

	.headFont {
		display: block;
		font-family: "Times New Roman", Times, serif;
		font-size: 30px;
		margin: 30px 0 0 30px;
	}

	.nav {
		margin-left: 30px;
	}

	.toggle-button {
		margin-left: 23px;
	}

	i {
		margin-right: 5px;
	}

	.box-card {
		width: 930px;
	}

	a {
		padding-left: 600px !important;
	}
</style>
